<template>
  <view>
    <z-paging-swiper>
      <view slot="top">
        <u-navbar :title="'搜索“' + keyword + '”'"></u-navbar>
        <view class="tabView" style="width: 100%">
          <u-tabs-swiper
            ref="uTabs"
            :list="tabsList"
            :current="current"
            @change="tabsChange"
            :is-scroll="false"
            :show-bar="false"
            active-color="#10A28F"
            swiper-width="750"
          >
          </u-tabs-swiper>
        </view>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      </view>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging0"
            v-model="itemList[0]"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="goods_area">
              <view
                @click="onDetail(item)"
                class="goods_box"
                style="margin-bottom: 15rpx"
                v-for="(item, index) in itemList[0]"
                :key="index"
              >
                <image :src="item.picUrl" mode=""></image>
                <view style="padding: 15rpx">
                  <view class="goods_title">
                    {{ item.name }}
                  </view>
                  <view class="goods_price">
                    <view class="">
                      <text class="price_tip">¥</text>
                      <text class="price_main">{{ (item.price * 0.01).toFixed(2) }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging1"
            v-model="itemList[1]"
            @query="queryList"
            :fixed="false"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            :empty-view-text="'暂无“' + keyword + '”相关的数据'"
            :empty-view-img-style="imgStyle"
          >
            <view class="goods_area">
              <view
                @click="onShopDetail(item)"
                class="goods_box"
                style="margin-bottom: 15rpx"
                v-for="(item, index) in itemList[1]"
                :key="index"
              >
                <image :src="item.logo" mode=""></image>
                <view style="padding: 15rpx">
                  <view class="goods_title">
                    {{ item.name }}
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
        <!-- <swiper-item class="swiperItem">
				<z-paging ref="paging2" v-model="itemList[2]" @query="queryList" :fixed="false" :auto="false"
					:empty-view-img="`${getImageUrl('empty.png')} `" :empty-view-text="'暂无“'+keyword+'”相关的数据'" :empty-view-img-style="imgStyle">

				</z-paging>
			</swiper-item>	 -->
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      scurrent: 0,
      searchStatus: 2,
      search_list_hot: [],
      store_key: 'search_list',
      tabsList: [
        {
          name: '商品'
        },
        {
          name: '店铺'
        }
        // {
        // 	name:"视频",
        // },
      ],
      itemList: [
        [],
        []
        // [],
      ],
      keyword: ''
    }
  },
  onLoad(options) {
    this.keyword = options.keyword
    this.queryList()
  },
  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      if (this.itemList[this.scurrent].length == 0) {
        this.queryList()
      }
    },

    queryList(pageNo = 1, pageSize = 10) {
      let queryUrl = ''
      if (this.scurrent == 0) {
        queryUrl = '/app-api/product/spu/page'
        this.$u
          .get(queryUrl, {
            pageNo,
            pageSize,
            keyword: this.keyword
          })
          .then((res) => {
            let dynamicPaging = 'paging' + this.scurrent
            this.$refs[dynamicPaging].complete(res.data.list)
          })
      } else if (this.scurrent == 1) {
        queryUrl = '/app-api/shop/info/page'
        this.$u
          .get(queryUrl, {
            pageNo,
            pageSize,
            keyword: this.keyword
          })
          .then((res) => {
            let dynamicPaging = 'paging' + this.scurrent
            this.$refs[dynamicPaging].complete(res.data.list)
          })
      } else {
        queryUrl = ''
      }
    },

    onInput() {
      this.searchStatus = 1
    },

    onDetail(item, type) {
      uni.navigateTo({
        url:
          '/goods/goods-details/goods-details?goodsId=' +
          item.id +
          '&shop=' +
          JSON.stringify(item.shop)
      })
    },
    onShopDetail(e) {
      uni.navigateTo({
        url: '/other/merchant-center/merchant-center?id=' + e.id
      })
    },
    search() {
      uni.navigateBack()
    }
  }
}
</script>
<style>
@import url('index.css');

page {
  background: #f2f2f2;
}

::v-deep .u-mode-center-box {
  background: transparent !important;
}

::v-deep .z-paging-content-fixed,
.zp-loading-fixed {
  bottom: 0 !important;
}
</style>

<style scoped lang="scss">
.dSLComVue {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;

  .dSLComVueTop {
    width: 99%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 40rpx;

    .dSLComVueTopLeft {
      flex: 1;
      height: 60rpx;
      background-color: #e8e8e8;
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 3%;
      // background-color: #ccc;
      border: 1rpx solid #f2f2f2;

      .dSLComVueTopLeftImg {
        flex: 1;
        height: 80rpx;
      }

      .dSLComVueTopLeftInput {
        flex: 1;
        height: 60rpx;
        padding: 0 20rpx;
      }

      .dSLComVueTopLeftDel {
        width: 70rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }

    .dSLComVueTopRight {
      width: 100rpx;
      margin-left: 30rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .dSLComVueTopRightBtn {
        width: 120rpx;
        height: 60rpx;
        border-radius: 30rpx;
        margin-right: 30rpx;
        font-size: 30rpx;
        // color: red;
        display: flex;
        // color: #ff00ff;
        // border:1rpx solid #ff00ff;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
